<template>
  <div class="YYR">
    <h3>
      <span>入驻歌手</span>
      <a href="javascript:;">查看全部></a>
    </h3>
    <!-- 数据 -->
    <ul>
      <li v-for="item in RZlist" :key="item.id">
        <a href="javascript:;">
          <div class="touxiang">
            <img :src="item.picUrl" alt="">
          </div>
          <div class="info">
            <h4>
              <span>{{item.name}}</span>
            </h4>
            <p>独立音乐人</p>
          </div>
        </a>
      </li>
    </ul>
    <div class="but">
      <a href="javascript:;">
        <p>申请成为网易音乐人</p>
      </a>
    </div>
  </div>
</template>
<script>
export default {
 data: () => ({
   RZlist:[]
 }),
  created() {
    this.getRZ()
  },
  methods: {
    async getRZ(){
      try {
        const res=await this.Api.cyzApi.getRZ()
        this.RZlist=res.data.artists.slice(17,22)
      } catch (error) {
        alert("获取入驻歌手失败"+error)
      }
    }
  }
};
</script>
<style lang="less">
.YYR{
    list-style: none;
    font-size: 12px;
    color: #333;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: none;
  a{
    cursor: pointer;
    text-decoration: none;
    color: #333;
  }
  margin-top: 15px;
  h3{
    position: relative;
    height: 23px;
    margin: 0 20px;
    border-bottom: 1px solid #ccc;
    color: #333;
    font-size: 12px;
      span{
        float: left;
        color: #333;
        font-size: 100%;
      }
      a{
            float: right;
    font-weight: normal;
    color: #666;
      }
  }
  ul{
    list-style: none;
    margin: 6px 0 14px 20px;
    li{
      margin-top: 14px;
      float: left;
      width: 210px;
      height: 62px;
      background: #fafafa;
        a{
        float: left;
        width: 210px;
        height: 62px;
        background: #fafafa;
        color: #333;
          .touxiang{
            float: left;
            width: 62px;
            height: 62px;
            font-size: 12px;
              img{
                float: left;
                width: 62px;
                height: 62px;
              }
          }
          .info{
            float: left;
            width: 133px;
            height: 60px;
            padding-left: 14px;
            border: 1px solid #e9e9e9;
            border-left: none;
            font-size: 12px;
              h4{
                span{
                  cursor: pointer;
                  width: 90%;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                  font-size: 14px;
                  display: inline-block;
                }
              }
              p{
                width: 90%;
                margin-top: 8px;
                cursor: pointer;
                color: #666;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                font-size: 12px;
              }
          }
        }
    }
  }
  .but{
    a{
      margin-top: 13px;
      margin-left: 20px;
      border-radius: 4px;
      color: #333;
      background: url('../../../../../assets/cyzimgs/xuebitu9.png');
      background-position: right -100px;
      text-decoration: none;padding: 0 5px 0 0;
      white-space: nowrap;
      display: inline-block;
      height: 31px;
      line-height: 31px;
      overflow: hidden;
      vertical-align: top;
      text-align: center;
      cursor: pointer;
        p{
          width: 170px;
          font-weight: bold;
          color: #333;
          background: url('../../../../../assets/cyzimgs/xuebitu8.png');
          background-position: 0 -59px;
          padding: 0 15px 0 20px;
          pointer-events: none;
          display: inline-block;
          *display: inline;
          *zoom: 1;
          height: 31px;
          line-height: 31px;
          overflow: hidden;
          *line-height: 32px;
          vertical-align: top;
          text-align: center;
          cursor: pointer;
        }
    }
  }
}
</style>